<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            left: 0px;
            top: 0px;
            opacity: 1;
        }


        p {
            width: 200px;
            height: 200px;
            background-color: orange;
            position: absolute;
            left: 0;
            top: 350px;
        }
    </style>
</head>

<body>
    <div></div>


    <p></p>
    <script>
        // opacity   透明度    0~1  
        // left     0~1000
        // top      0~1000
        // width    0~1000
        // height   0~1000 


        /// 需求  opacity 跟 left top width height 共同使用一个函数 
        // 实现 运动效果  

        // 只需要单独把opacity拿出来判断 


        // 拿到opacity 之后   乘以100 
        // 然后 具有渐变效果 
        // 重新赋值的会后 再除以100 
        // function move1(ele, type, target, timer) {
        //     // 判断是否是opacity  //如果是 目标值 乘以100 
        //     if (type === 'opacity') target *= 100;
        //     const t = setInterval(function () {
        //         let current
        //         if (type === 'opacity') {
        //             current = window.getComputedStyle(ele)[type] * 100;
        //         } else {
        //             current = parseInt(window.getComputedStyle(ele)[type]);
        //         }
        //         // 实时获取 最新的样式值 

        //         // 计算运动距离 
        //         let duration = (target - current) / 10;

        //         duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);

        //         if (current === target) {
        //             clearInterval(t)
        //         }
        //         else {
        //             if (type === 'opacity') {
        //                 ele.style[type] = (current + duration) / 100;
        //             } else {
        //                 ele.style[type] = current + duration + 'px';
        //             }
        //         }

        //     }, timer)
        // }

        // var divele = document.querySelector('div');
        // divele.onclick = function(){
        //     // move(divele,'top',610,20);
        //     move(divele,'opacity',0.61,20);

        // }


        // 以上只能  一个动画一个效果  
        // 思考 如何  一个动画  多个效果  


        // 方案1: 
        // move(元素,type1,target1,type2,target2,type3,target3,....timer)


        // 弊端 
        //    形参写上  实参必须传值  


        // 方案2:
        // move(元素,对象,timer)

        // 对象  type作为键   目标作为值  
        /* {
              left:500,
              height:300,
              opacity:0.08
  
           } */



        // 采用方案2: 
        // 上面的move  针对的是 一个type 一个target 
        // 现在是多个type 多个target 

        // 现在需要遍历对象  拿到  type 和target 


        // function move2(ele, obj, timer) {
        //     // 遍历对象 
        //     for (let k in obj) {
        //         // k  是  left top  width  height
        //         //obj[k]  目标值  
        //         move1(ele, k, obj[k], timer)
        //     }
        // }


        function move3(ele, obj, timer) {
            let count = 0;
            for (let k in obj) {
                count++;
                const type = k;
                let target = obj[k];
                // 判断是否是opacity  //如果是 目标值 乘以100 
                if (type === 'opacity') target *= 100;
                const t = setInterval(function () {
                    let current;
                    if (type === 'opacity') {
                        current = window.getComputedStyle(ele)[type] * 100;
                    } else {
                        current = parseInt(window.getComputedStyle(ele)[type]);

                    }
                    // 实时获取 最新的样式值 

                    // 计算运动距离 
                    let duration = (target - current) / 10;

                    duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration);
                    console.log(duration);
                    if (current === target) {
                        clearInterval(t);
                        count--;
                        if(count === 0){
                            console.log('定时器全部结束了');
                        }
                        // console.log(`第${t}个定时器结束`);
                    }
                    else {
                        if (type === 'opacity') {
                            ele.style[type] = (current + duration) / 100;
                        } else {
                            ele.style[type] = current + duration + 'px';
                        }
                    }

                }, timer)
            }
        }


        var divele = document.querySelector('div');
        divele.onclick = function () {
            move3(divele, {left:500,width:300,opacity:0.34}, 20);

        }


        // 有个对象 多个类型  
        // 每个类型 开一个定时器  
        // 我们能做的是每个定时器结束  打印
        // 如何直到所有的定时器全部结束 ?

        // 如何解决?

        //准备一个计数器
        // 开一个定时器  计数器+1

        // 每结束一个  计数器-1


        // 计数器最后 如果为0  那么 代表所有定时器全部结束 



    </script>
</body>

</html>